<!-- 03VueInstance.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script> -->
</head>
<body>
	<h3>用 key 管理可复用的元素</h3>
    <div id="demo" style="border:1px solid red;padding:15px;margin-bottom:10px;">
		<p>没有使用 key</p>
		<template v-if="loginType === 'username'">
			<label>Username</label>
			<input placeholder="Enter your username">
		</template>
		<template v-else>
			<label>Email</label>
			<input placeholder="Enter your email address">
		</template>
		<div>
			<button @click="changeLoginType">改变'loginType'</button>
		</div>
	</div>
	
	<div id="demo1" style="border:1px solid red;padding:15px;">
		<p>使用 key</p>
		<template v-if="loginType === 'username'">
			<label>Username</label>
			<input placeholder="Enter your username" key="username-input">
		</template>
		<template v-else>
			<label>Email</label>
			<input placeholder="Enter your email address" key="email-input">
		</template>
		<div>
			<button @click="changeLoginType">改变'loginType'</button>
		</div>
	</div>
	
    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
				loginType: 'username'
            },
			methods: {
				changeLoginType: function() {
					this.loginType = ('username' == this.loginType) ? 'email' : 'username';
				}
			}
        });
		var demo1 = new Vue({
            el: '#demo1',
            data: {
				loginType: 'username'
            },
			methods: {
				changeLoginType: function() {
					this.loginType = ('username' == this.loginType) ? 'email' : 'username';
				}
			}
        });
    </script>
</body>
</html>